<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="flex">
      <div class="plr15">
        <el-input
          v-model="searchCompanyName"
          v-enter="handleQuery"
          clearable
          placeholder="企业名称" />
      </div>
      <el-button
        v-blur
        type="primary"
        :icon="Search"
        @click="handleQuery"
      >
        搜索
      </el-button>
      <el-button
        v-blur
        type="primary"
        :icon="Plus"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>
    <div class="t">
      <PagerTable
        :table-data="tableData"
        :table-pager="tablePager"
        hide-on-single-page
        @current-page-change="handlePageChange"
      >
        <el-table-column
          align="center"
          label="操作"
          width="180"
        >
          <template #default="scope">
            <el-button
              v-blur
              size="small"
              type="primary"
              :icon="Edit"
              round
              @click.prevent="() => handleEdit(scope.row)"
            />
            <el-popconfirm 
              title="确定要删除这条数据吗?"
              @confirm="() => handleDelete(scope.row)"
            >
              <template #reference>
                <el-button
                  v-blur
                  size="small"
                  type="danger"
                  :icon="Delete"
                  round
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </PagerTable>
    </div>
    <Drawer
      :is-visible="isVisible"
      @close-drawer="(flag) => emitClose(flag)"
      @save-drawer="emitSave"
    >
      <template #header>
        <h3
          v-cloak
          class="fn18 flex-middle active no-select"
        >
          <template v-if="type === EBtnType.add">
            <Plus style="width: 2rem;height: 2rem;margin-right: 5px;"/>
            新增
          </template>
          <template v-if="type === EBtnType.edit">
            <EditPen style="width: 2rem;height: 2rem;margin-right: 5px;"/>
            编辑
          </template>
        </h3>
      </template>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-suffix="："
        status-icon
        label-width="120px"
      >
        <el-form-item
          label="业务类型"
          prop="businesstype">
          <!-- <el-input v-model="form.name" /> -->
          <el-select
            v-model="form.businesstype"
            class="w100"
            clearable
            placeholder="业务类型"
          >
            <el-option
              v-for="item in businessType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="企业名称"
          prop="companyname">
          <el-input
            v-model="form.companyname"
            clearable
            placeholder="请输入企业名称"/>
        </el-form-item>
        <el-form-item
          label="企业编号"
          prop="companycode">
          <el-input
            v-model="form.companycode"
            clearable
            placeholder="请输入企业编号"/>
        </el-form-item>
        <el-form-item
          label="企业注册地"
          prop="registration">
          <el-input
            v-model="form.registration"
            clearable
            placeholder="请输入企业注册地"/>
        </el-form-item>
        <el-form-item
          label="企业联系人"
          prop="contact">
          <el-input
            v-model="form.contact"
            clearable
            placeholder="请输入企业联系人"/>
        </el-form-item>
        <el-form-item
          label="联系人电话"
          prop="tel">
          <el-input
            v-model="form.tel"
            clearable
            placeholder="请输入联系人电话"/>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search, Edit, Delete, Plus, EditPen } from '@element-plus/icons-vue'
import type { ITable, IPager } from '@/types/table'
import PagerTable from '@/components/PagerTable/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import { form, rules, saveAdd, queryEdit, saveEdit, saveDel } from './operate'
import { EBtnType } from '@/types/btn'
import { businessType } from '@/data/select'
const searchCompanyName = ref<string>()
const isVisible = ref(false)
const formRef = ref<HTMLFormElement>()
const type = ref<EBtnType>(EBtnType.add)
const tableData = reactive<ITable>({
  data: [
    {
      name: 'name',
      date: 'date',
      power: 'power',
      income: '100'
    }
  ],
  cols: [
    { label: 'id', prop: 'name' },
    { label: '企业名称', prop: 'date' },
    { label: '企业编号', prop: 'power' },
    { label: '企业注册地', prop: 'income' },
    { label: '企业联系人', prop: 'income' },
    { label: '企业联系人电话', prop: 'income' }
  ]
})
const tablePager = reactive<IPager>({
  total: 400,
  currentPage: 1
})
const handlePageChange = () => {}
const handleQuery = () => {
  console.log('searchCompanyName:', searchCompanyName)
}
const handleAdd = () => {
  type.value = EBtnType.add
  isVisible.value = true
  console.log('formRef.value:', formRef.value)
  formRef.value?.resetFields()
}
const handleEdit = (row: any) => {
  console.log('row:', row)
  isVisible.value = true
  type.value = EBtnType.edit
  formRef.value?.resetFields()
  queryEdit(row.id)
}
const handleDelete = (row: any) => {
  saveDel(row.id, handleQuery)
}
const emitClose = (flag: boolean) => {
  isVisible.value = flag
}
const emitSave = () => {
  if (type.value === EBtnType.add) saveAdd(handleQuery)
  else if (type.value === EBtnType.edit) saveEdit(handleQuery)
}
</script>

<style lang="scss" scoped>
$color: #fff;
$active: #29F1FA;
.container {
  margin: 15px;
  height: calc(100vh - 30px - 7.8rem);
  flex: 1;
}
.t {
  width: 100%;
  height: 100%;
  position: relative;
}
.flex :deep(.el-button) {
  background: transparent;
}
.active {
  color: $active;
}
</style>
